<template>
  <div class="main">
    <center>
      <div class="head">
        <el-form :inline="true" ref="form" :model="form" label-width="80px">
          <el-form-item label="身份证号">
            <el-input v-model="form.idcard"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="form.carnumber"></el-input>
          </el-form-item>
          <el-form-item label="数据源">
            <el-select v-model="value" placeholder="请选择数据来源">
              <el-option label="车辆档案库" value="1"></el-option>
              <el-option label="Etc" value="2"></el-option>
              <el-option label="卡口" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-top:-20px" label="地区">
            <el-checkbox-group v-model="form.area">
              <el-checkbox label="西宁市" name="type"></el-checkbox>
              <el-checkbox label="海东市" name="type"></el-checkbox>
              <el-checkbox label="海北藏族自治州" name="type"></el-checkbox>
              <el-checkbox label="黄南藏族自治州" name="type"></el-checkbox>
              <el-checkbox label="海南藏族自治州" name="type"></el-checkbox>
              <el-checkbox label="果洛藏族自治州" name="type"></el-checkbox>
              <el-checkbox label="玉树藏族自治州" name="type"></el-checkbox>
              <el-checkbox
                label="海西蒙古族藏族自治州"
                name="type"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            style="float:left;margin-left:40px;margin-top:-20px"
            label="时间"
          >
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%;"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="过车时间"
                v-model="form.date2"
                style="width: 100%;"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item style="margin-top:-20px">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="foot">
        <el-table :data="tableData" style="width: 80%" border height="500">
          <el-table-column label="id" prop="id"> </el-table-column>
          <el-table-column label="身份证" prop="idcard" width="200">
          </el-table-column>
          <el-table-column label="图片" prop="image"
            ><el-image
              style="width: 100px; height: 60px"
              :src="url"
              :preview-src-list="srcList"
            >
            </el-image>
          </el-table-column>
          <el-table-column label="姓名" prop="name"> </el-table-column>
          <el-table-column label="车牌号" prop="carnumber"> </el-table-column>
          <el-table-column label="区域" prop="area_name"> </el-table-column>
          <el-table-column label="颜色" prop="color"> </el-table-column>
          <el-table-column label="型号" prop="type"> </el-table-column>
          <el-table-column label="时间" prop="time" width="200">
          </el-table-column>
        </el-table>
      </div>
    </center>
  </div>
</template>
<script>
import { searchdatafind } from "@/api/data";
export default {
  data() {
    return {
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ],
      tableData: [],
      form: {
        name,
        idcard: "",
        carnumber: "",
        from: "",
        date1: "",
        date2: "",
        delivery: false,
        area: [],
        resource: "",
        desc: ""
      },
      value: ""
    };
  },
  methods: {
    search() {
      var params = {
        name: this.form.name,
        idcard: this.form.idcard,
        carnumber: this.form.carnumber,
        from: this.value,
        date1: this.form.date1,
        date2: this.form.date2,
        area: this.form.area
      };

      searchdatafind("/data/searchdatafind", params).then(res => {
        if (res.code === 200) {
          if (res.data == null || res.data == "") {
            this.$message("查询无结果");
          } else {
            this.tableData = res.data;
          }
        } else if (res.code === 500) {
          this.$message(res.data);
        }
      });
    }
  }
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 700px;
  margin-top: 10px;
  border: 1px solid black;
}
.head {
  width: 90%;
  margin-top: 10px;
}
</style>
